/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */

// 设置省份下拉菜单数据
axios({
    url:'http://hmajax.itheima.net/api/province'
}).then(result => {
    document.querySelector('.province').innerHTML = '<option value="">省份</option>' + result.data.list.map(item => {
        return `
             <option value="${item}">${item}</option>
        `
    }).join('')
})

// 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
document.querySelector('.province').addEventListener('change', async e => {
    document.querySelector('.area').innerHTML = '<option value="">地区</option>'
    const result = await axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: { pname: e.target.value }
    })
    console.log(result.data.list);
    document.querySelector('.city').innerHTML = '<option value="">城市</option>' + result.data.list.map(item => {
        return `
            <option value="${item}">${item}</option>
        `
    })
})

// 切换城市，设置地区下拉菜单数据
document.querySelector('.city').addEventListener('change', async e => {
    const pname = document.querySelector('.province').value
    const cname = e.target.value
    const result = await axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: { pname, cname }
    })
    console.log(result.data.list);
    document.querySelector('.area').innerHTML = '<option value="">地区</option>' + result.data.list.map(item => {
        return `
            <option value="${item}">${item}</option>
        `
    })
})

// 提交数据
document.querySelector('.submit').addEventListener('click', async e => {
    const form = document.querySelector('.info-form')
    const formData = serialize(form, { hash: true, empty: true })
    try {
        const result = await axios({
        url: 'http://hmajax.itheima.net/api/feedback',
        method: 'POST',
        data: formData
    })
    alert(result.data.message)
    } catch (error) {
        alert(error.response.data.message)
    }
})